<template>
	<view>
		<view class="head">
			<view>
				<!-- #ifdef MP-WEIXIN -->
				<view style="width: 1rpx;" :style="{height:perch+'px'}"></view>
				<!-- #endif -->
				
				<view style="width: 1rpx;" :style="{height:200+'rpx'}"></view>
				<view class=""style="position: fixed;top: 0; z-index: 98;width: 100%; background-color: #e6f6f2;">
					<image @click="fanhui" :style="{ top: safeTop }" class="fanhui-img" src="../../static/index/fanhuib.png" mode=""></image>
					<view class="head-name" :style="[{ paddingTop: safeTop }, { height: menuH }, { lineHeight: menuH }]">
						<view @click="currnetTag = 0" :class="{ 'activate-tag': currnetTag == 0 }">助教</view>
						<view @click="currnetTag = 1" :class="{ 'activate-tag': currnetTag == 1 }" class="tab-l">动态</view>
					</view>
					
					<!-- 搜索框 -->
					<view class="search-box" v-if="currnetTag == 0">
						<text>全国</text>
						<image class="down-img" src="../../static/index/down.png" mode=""></image>
						<text class="wire"></text>
						<image class="search-img" src="../../static/index/search.png" mode=""></image>
						<input type="text" placeholder="搜索助教" />
					</view>
					
					<view class="dynamicTyping" v-else>
						<view @click="currentTypeing = 0" :class="{'atdynamicTyping':currentTypeing == 0}" class="recommend border-radius1">推荐</view>
						<view @click="currentTypeing = 1" :class="{'atdynamicTyping':currentTypeing == 1}" class="recommend border-radius2">关注</view>
					</view>
					<view style="height: 24rpx;width: 100%;"></view>
				</view>
			</view>
			
			
			<view class="swiper" v-if="currnetTag == 0">
				<u-swiper radius="12" height='130' :list="swiperList" @change="change" @click="click"></u-swiper>
			</view>
			<view style="height: 260rpx;width: 100%;" v-else></view>
		</view>
		
		<template v-if="currnetTag == 0">
			<view class="box">
				<!-- <u-sticky bgColor="#f7f8fa" :offset-top="112+perch"> -->
				<u-tabs :list="list1" lineColor="#4BC264" :activeStyle="{
			    color: '#1C274C',
			    fontWeight: 'bold',
			    transform: 'scale(1.02)'
			}"
			:inactiveStyle="{
			    color: '#A4A9B7',
			    transform: 'scale(1)'
			}">
					<view slot="right" style="padding-left: 4px" @tap="$u.toast('插槽被点击')">
						<u-icon name="list" size="21" bold></u-icon>
					</view>
				</u-tabs>
				<!-- </u-sticky> -->
				
				<view class="list-box">
					<view class="item-each" v-for="(item,index) in itemList" @click="toDetail">
						<image class="each-img" src="../../static/img-6.png" mode="aspectFill"></image>
						<view class="name">李擎洲 <text> <image class="sex-img" src="../../static/index/girl.png" mode=""></image> 19 </text> <text class="text2"> <image class="sex-img" src="../../static/index/man.png" mode=""></image> 21 </text> </view>
						<view class="brief">白领 | 167cm | 11361km</view>
						<view class="tabs">
							<text>台球</text>
							<text>下棋</text>
						</view>
					</view>
					<u-loadmore :status="status" />
				</view>
			</view>
		</template>
		
		<template v-if="currnetTag == 1">
			<view class="dynamic-box">
				<view class="dynamic-each" v-for="(item,index) in 2">
					<view class="assistant-info">
						<view style="display: flex;align-items: center;">
							<view class="assistant-img">
								<image src="../../static/img-6.png" mode="aspectFill"></image>
							</view>
							<view class="assistant-brief">
								<view class="name">李擎洲 <text class="text1"> <image class="sex-img" src="../../static/index/girl.png" mode=""></image> 19 </text> </view>
								<view class="brief-box">
									<text class="brief">白领 <text class="wire"></text> 167cm <text class="wire"></text> 11361km</text>
								</view>
							</view>
						</view>
						<view class="concern-btn">
							关注
						</view>
					</view>
					
					<view class="content-text">早上好呀，早安！</view>
					
					<view class="content-img-box">
						<image v-for="i in 2" class="content-img" src="../../static/img-6.png" mode="aspectFill"></image>
					</view>
					
					<view class="time-like">
						<view class="time">2024-04-01 09:40:00</view>
						<view class="like"> <image class="like-img" src="../../static/index/dark-like.png" mode=""></image>89 </view>
					</view>
					
					<view class="praised">
						<image class="praised-img" src="../../static/index/dark-like.png" mode=""></image>
						桃桃；橘子；柚子 等赞过
					</view>
				</view>
			</view>
		</template>
		
		<view style="height: 20rpx;width: 1rpx;"></view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			menuH: uni.getStorageSync('menuH') || '',
			safeTop: uni.getStorageSync('safeTop') || 20 + 'px',
			perch:uni.getStorageSync('perch'),
			currnetTag: 0,
			list1: [
				{
					name: '附近'
				},
				{
					name: '推荐'
				},
				{
					name: '人气'
				},{
					name: '好评'
				}
			],
			swiperList: ['https://cdn.uviewui.com/uview/swiper/swiper1.png'],
			itemList:10,
			page:1,
			status: 'loadmore',
			flag: false,
			currentTypeing:0
		};
	},
	onLoad() {
		
	},
	onReachBottom() {
		//避免多次触发
		if (this.status == 'loading' || this.status == 'nomore') {
			return;
		}
		this.status = 'loading';
		this.getList()
	},
	methods: {
		toDetail(){
			uni.navigateTo({
				url:'/pages/assistantDetail/assistantDetail'
			})
		},
		getList(){
			this.flag = false
			this.status = 'loading';
			setTimeout(()=>{
				// this.itemList = this.itemList.concat(res.data);
				if (this.itemList == 30) {
					this.status = 'nomore';
				} else {
					this.itemList += 10
					this.status = 'loadmore';
				}
				this.flag = true
				uni.stopPullDownRefresh();
			},1000)
		},
		fanhui() {
			uni.navigateBack();
		}
	}
};
</script>

<style lang="scss">
page {
	background-color: #f7f8fa;
}
.head {
	width: 750rpx;
	// height: 524rpx;
	background: linear-gradient(to bottom, #e6f6f2, #f6f7fa);
	position: relative;
	.fanhui-img {
		width: 48rpx;
		height: 48rpx;
		position: absolute;
		margin-left: 32rpx;
		padding-top: 5rpx;
	}
	.head-name {
		display: flex;
		font-weight: 800;
		font-size: 40rpx;
		color: #a4a9b7;
		padding-left: 100rpx;
		.tab-l {
			padding-left: 64rpx;
		}
		.activate-tag {
			font-weight: 800;
			font-size: 40rpx;
			color: #1c274c;
		}
	}

	.search-box {
		width: 622rpx;
		background: #ffffff;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		margin: auto;
		margin-top: 27rpx;
		padding: 17rpx 32rpx;
		display: flex;
		align-items: center;
		text {
			font-weight: bold;
			font-size: 28rpx;
			color: #1c274c;
		}
		.down-img {
			width: 20rpx;
			height: 20rpx;
			margin-right: 24rpx;
			margin-left: 16rpx;
		}
		.wire {
			width: 2rpx;
			height: 28rpx;
			background-color: #edeef1;
		}
		.search-img {
			width: 24rpx;
			height: 24rpx;
			margin-left: 24rpx;
			margin-right: 16rpx;
		}
		input {
			font-size: 26rpx;
			width: 70%;
		}
	}
	
	.dynamicTyping{
		width: 416rpx;
		height: 60rpx;
		background: #FFFFFF;
		border-radius: 0rpx 16rpx 16rpx 0rpx;
		margin: auto;
		margin-top: 24rpx;
		display: flex;
		border-radius: 16rpx;
		
		.recommend {
			width: 208rpx;
			height: 60rpx;
			background: #FFFFFF;
			font-weight: 500;
			font-size: 26rpx;
			color: #A4A9B7;
			text-align: center;
			line-height: 60rpx;
		}
		.border-radius1 {
			border-radius: 16rpx 0rpx 0rpx 16rpx;
		}
		.border-radius2 {
			border-radius: 0rpx 16rpx 16rpx 0rpx;
		}
		.atdynamicTyping {
			background-color: #4BC264;
			color: #FFF;
		}
	}
	.swiper {
		width: 686rpx;
		margin: auto;
		margin-top: 32rpx;
	}
}

.box {
	padding:0 32rpx;
	margin-top:16rpx;
	
	.list-box {
		display: flex;
		flex-wrap: wrap;
		
		.item-each:nth-child(even){
			margin-left: 24rpx;
		}
		.item-each {
			padding: 16rpx 16rpx 24rpx 16rpx;
			background-color: #FFF;
			border-radius: 24rpx;
			.each-img {
				width: 299rpx;
				height: 299rpx;
				border-radius: 24rpx;
			}
			.name {
				font-weight: bold;
				font-size: 30rpx;
				color: #1C274C;
				margin-top: 21rpx;
				text {
					// width: 60rpx;
					display: inline-block;
					margin-left: 8rpx;
					height: 28rpx;
					line-height: 28rpx;
					background: #FF648F;
					border-radius: 14rpx 14rpx 14rpx 14rpx;
					padding: 0 8rpx;
					font-weight: 500;
					font-size: 20rpx;
					color: #FFFFFF;
					.sex-img {
						width: 18rpx;
						height: 18rpx;
						vertical-align: middle;
					}
				}
				.text2 {
					background-color: #3E9AF4;
				}
			}
			.brief {
				font-weight: 500;
				font-size: 22rpx;
				color: #A4A9B7;
				margin-top: 8rpx;
			}
			.tabs {
				margin-top: 16rpx;
				text {
					display: inline-block;
					height: 36rpx;
					line-height: 36rpx;
					padding: 0 16rpx;
					background: #EDF9F0;
					border-radius: 6rpx 6rpx 6rpx 6rpx;
					font-weight: 500;
					font-size: 20rpx;
					color: #4BC264;
					margin-right: 8rpx;
				}
			}
		}
	}
}



// 动态
.dynamic-box {
	position: relative;
	top: -250rpx;
	
	.dynamic-each {
		width: 622rpx;
		// height: 564rpx;
		background: #FFFFFF;
		border-radius: 24rpx 24rpx 24rpx 24rpx;
		margin: auto;
		margin-bottom: 24rpx;
		padding: 32rpx;
			
		.assistant-info {
			display: flex;
			align-items: center;
			justify-content: space-between;
			.assistant-img {
				width: 100rpx;
				height: 100rpx;
				background: #D9D9D9;
				border-radius: 50%;
				image {
					width: 100rpx;
					height: 100rpx;
					border-radius: 50%;
				}
			}
			
			.assistant-brief {
				margin-left: 32rpx;
				.name {
					font-weight: 500;
					font-size: 30rpx;
					color: #1C274C;
					
					.text1 {
						// width: 60rpx;
						display: inline-block;
						margin-left: 8rpx;
						height: 28rpx;
						line-height: 28rpx;
						background: #FF648F;
						border-radius: 14rpx 14rpx 14rpx 14rpx;
						padding: 0 8rpx;
						font-weight: 500;
						font-size: 20rpx;
						color: #FFFFFF;
						.sex-img {
							width: 18rpx;
							height: 18rpx;
							vertical-align: middle;
						}
						margin-right: 16rpx;
					}
					.text2 {
						background-color: #3E9AF4;
					}
				}
				.brief-box {
					.brief {
						font-weight: 500;
						font-size: 22rpx;
						color: #A4A9B7;
						margin-top: 8rpx;
						.wire {
							display: inline-block;
							margin: 0 16rpx;
							width: 2rpx;
							height: 17rpx;
							background-color: #EDEEF1;
						}
					}
				}
			}
			
			.concern-btn {
				width: 100rpx;
				height: 48rpx;
				background: #4BC264;
				border-radius: 28rpx 28rpx 28rpx 28rpx;
				text-align: center;
				line-height: 48rpx;
				font-weight: 500;
				font-size: 26rpx;
				color: #FFFFFF;
			}
		}
		.content-text {
			font-weight: 500;
			font-size: 30rpx;
			color: #1C274C;
			line-height: 35rpx;
			margin-top: 24rpx;
		}
		.content-img-box {
			display: flex;
			flex-wrap: wrap;
			
			.content-img {
				width: 191rpx;
				height: 191rpx;
				background: #D9D9D9;
				border-radius: 30rpx 30rpx 30rpx 30rpx;
				margin-top: 24rpx;
			}
			image:nth-child(2) {
				margin-left: 24rpx;
			}
			image:nth-child(3) {
				margin-left: 24rpx;
			}
			image:nth-child(5) {
			    margin-left: 24rpx;
			}
			image:nth-child(6) {
				margin-left: 24rpx;
			}
		}
		.time-like {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-top: 32rpx;
			font-weight: 500;
			font-size: 20rpx;
			color: #A4A9B7;
			.time {
				
			}
			.like {
				.like-img {
					width: 40rpx;
					height: 40rpx;
					margin-right: 8rpx;
					vertical-align: middle;
				}
			}
		}
		.praised {
			display: flex;
			align-items: center;
			width: 558rpx;
			height: 55rpx;
			background: #F7F8FA;
			border-radius: 30rpx 30rpx 30rpx 30rpx;
			margin: auto;
			padding: 0 32rpx;
			font-weight: 500;
			font-size: 22rpx;
			color: #6B738B;
			line-height: 26rpx;
			margin-top: 24rpx;
			.praised-img {
				width: 28rpx;
				height: 28rpx;
				margin-right: 16rpx;
			}
		}
	}
}
</style>
